<template>
  <div class="rating-component">
    <!-- 星级评价板块 -->
    <p style="color: #12d48a">星级评价板块</p>
    <div class="stars-section">
      <div v-for="(standard, index) in standards" :key="index" class="standard">
        <div class="label">{{ standard.label }}</div>
        <div class="stars">
          <el-rate
              v-model="standard.score"
              :colors="['#FFD700', '#FFD700', '#FFD700']"
              :icon-classes="['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']"
              @change="updateStarComment"
          />
        </div>
      </div>
    </div>

    <!-- 快速评价按钮 -->
    <p style="color: #12d48a">快速评价板块</p>
    <div class="quick-comment-section">
      <el-button
          v-for="(text, index) in quickComments"
          :key="index"
          type="text"
          @click="updateTextComment(text)"
          class="quick-comment-button"
      >
        {{ text }}
      </el-button>
    </div>

    <!-- 评论板块 -->
    <div class="comment-section">
      <el-input
          type="textarea"
          v-model="comment"
          placeholder="请输入您的详细评价..."
          maxlength="500"
          show-word-limit
          rows="10"
          class="comment-input"
      ></el-input>
    </div>

    <!-- 返回和提交按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="back" style="margin-left: 10px;">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {ElRate, ElInput, ElButton, ElMessage} from 'element-plus';

import axios from 'axios';

const router = useRouter();
const route = useRoute();
const standards = ref([
  { label: '准确', score: 0, comment: '未评价' },
  { label: '速度', score: 0, comment: '未评价' },
  { label: '态度', score: 0, comment: '未评价' }
]);

const comment = ref('');
const starComment = ref('');
const textComment = ref('');
const quickComments = ref(['好 ', '服务真差 ', '赞美 ','真不行 ', '态度恶劣 ', '踩 ']); // 快速评价按钮的文字数组

const updateStarComment = () => {
  const scores = ['未评价; ', '非常差; ', '差; ', '一般; ', '好; ', '非常好; '];
  standards.value.forEach(standard => {
    standard.comment = standard.score > 0 ? scores[standard.score] : "";
  });
  starComment.value = standards.value
      .filter(standard => standard.score > 0) // 只包含有评分的标准
      .map(s => `${s.label}: ${s.comment}`)
      .join('\n') + '\n\n';
  comment.value = starComment.value + textComment.value;
};

const initComment = computed(() => {
  return starComment.value + textComment.value;
});

onMounted(() => {
  comment.value = initComment.value;
});

const updateTextComment = (text) => {
  textComment.value += text + '; '; // 更新 textComment 为按钮上的文字
  comment.value = starComment.value + textComment.value; // 更新总评论
};

const back = () => {
  router.go(-1);
};

const submit = () => {
  // 获取 URL 中的 telId 参数
  const telId = route.query.telId;
  const remarks=comment.value;
  // 构造请求数据
  const requestData = {
   telId, remarks
  };

  // 发送 POST 请求
  axios.post("supervisor/addRemarksById", requestData)
      .then((response) => {
        // 请求成功时的处理
        console.log("提交成功:", response.data);
        // 弹出提示框，告知用户提交成功
        ElMessage.success("评价已成功提交！");
        // 可选：提交成功后返回上一页
        router.go(-1);
      })
      .catch((error) => {
        // 请求失败时的处理
        console.error("提交失败:", error);
        // 弹出提示框，告知用户提交失败
        ElMessage.error("评价提交失败，请稍后重试！");
      });
};
</script>

<style scoped>
.rating-component {
  padding: 20px;
}

.stars-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.standard {
  width: 25%; /* 三个板块平均分布 */
}

.label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}

.stars {
  display: flex;
  align-items: center;
}


.quick-comment-button {

  border: 1px solid #ccc; /* 添加边框 */
  padding: 10px; /* 添加内边距 */
  border-radius: 5px; /* 添加圆角 */
}
.quick-comment-section p {
  margin-bottom: 10px;
}

.back-button {
  margin-bottom: 20px;
  text-align: right; /* 将返回按钮对齐到右边 */
}

.comment-section {
  width: 100%;
}

.comment-input {
  width: 100%;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>